<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX平台</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <header>
        <div class="c900 flex">
            <a href="./"><h1 style="color: #fdfdfd">XXX平台</h1></a>
            <span class="flex">
                <a><el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar></a>
                 <template v-if="this.user.userinfo">
                    <a href="javaScript:;">{{this.user.name}}</a>
                    <a href="javaScript:;" @click="userDel" style="margin-left: 40px">退出登录</a>
                </template>
                <template v-else>
                    <a href="register.html">注册</a>
                    <a href="login.html">登录</a>
                </template>
            </span>
        </div>
    </header>
    <main class="c900">
        <el-container>
            <el-header style="background-color: transparent; height: auto">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="类别">
                        <el-input placeholder="类别"></el-input>
                    </el-form-item>
                    <el-form-item label="客户单位">
                        <el-input placeholder="客户单位"></el-input>
                    </el-form-item>
                    <el-form-item label="包含商品">
                        <el-input placeholder="包含商品"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="">查询</el-button>
                        <el-button type="primary" @click="dialogFormVisible=true">入库</el-button>
                        <el-button type="primary" @click="">出库</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table
                        :data="bills"
                        style="width: 100%">
                    <el-table-column prop="id" label="编号">
                    </el-table-column>
                    <el-table-column prop="type" label="分类">
                    </el-table-column>
                    <el-table-column prop="custom" label="客户">
                    </el-table-column>
                    <el-table-column prop="time" label="时间">
                    </el-table-column>
                    <el-table-column prop="user.name" label="经办人">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="" type="text" size="small">删除</el-button>
                            <el-button type="text" size="small">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="100">
                </el-pagination>
            </el-footer>
        </el-container>
        <el-dialog title="商品入库" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="类别" :label-width="150">
                    <el-input v-model="bill.type" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="客户单位" :label-width="150">
                    <el-input v-model="bill.custom" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="总金额" :label-width="150">
                    <el-input  v-model="bill.sums" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品id" :label-width="150">
                    <el-input v-model="gid" autocomplete="off" @change="findGoods"></el-input>
                </el-form-item>
            </el-form>
            <el-table :data="billItems" style="width: 100%">
                <el-table-column prop="id" label="商品编号">
                </el-table-column>
                <el-table-column prop="name" label="商品名">
                </el-table-column>
                <el-table-column prop="type" label="类型">
                </el-table-column>
                <el-table-column label="入库数量">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.nums" type="number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="入库价格">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.price" type="number"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addBill">确 定</el-button>
            </div>
        </el-dialog>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            user: {name:"",userinfo:false},
            bills:[],
            dialogFormVisible : false,
            bill:{type:"", custom:"", sums:0, uid:1},
            billItems:[],
            gid:0
        },
        created() {
            axios.get("queryBills").then(res=>this.bills=res.data);
            axios.post("loginInfo").then(res=>{
                if(res.data.code == 200){
                    this.user.name = res.data.data.name;
                    this.user.userinfo = true;
                }
            });
        },
        methods : {
            findGoods(gid){
                let index = this.billItems.findIndex(item=>item.id==gid);
                if(index > -1){
                    this.$alert("该商品已经录入");
                    return;
                }

                axios.get("findGoods?id="+gid).then(res=>{
                    res.data.nums = 0;
                    res.data.price = 0;
                    this.billItems.push(res.data);
                })
            },
            userDel(){
                axios.post("loginInfoDel").then(res=>{
                    if(res.data.code == 200){
                        this.user.name = "";
                        this.user.userinfo = false;
                    }
                })
            },

            addBill(){
                let p = new URLSearchParams();
                p.append("type", this.bill.type);
                p.append("custom", this.bill.custom);
                p.append("uid", this.bill.uid);
                let sum = 0;
                this.billItems.forEach(billItem=>{
                    p.append("gid", billItem.id);
                    p.append("num", billItem.nums);
                    p.append("price", billItem.price);
                    sum +=  billItem.nums * billItem.price;
                });
                this.bill.sums = sum;
                p.append("sums", this.bill.sums);

                axios.post("addBill",p).then(res=>{
                    if(res.data.code==1){
                        this.$message(res.data.msg);
                        this.dialogFormVisible = false;
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            }
        }
    })
</script>
</body>
</html>

<style>
    html,body,#app{
        height: 100%;
    }
    body{
        margin: 0px;
        padding: 0px;
        background-size: cover;
    }
    a{
        text-decoration: none;
        color: #666
    }
    img{
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
    .c900{
        width: 900px;
        margin-inline: auto;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .grid2{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    header{
        background-color: #0f9ae0;
        background-size: cover;
        position: sticky;
        top: 0px;
        z-index: 1;
        height: 60px;
    }
    header h1{
        margin: 10px;
    }
    header span>a{
        margin-left: 20px;
        color: #fff;
    }
    main{
        background-color: #eee;
        min-height: calc(100% - 100px);
        padding: 20px;
    }
</style>